<template>
	<div>
		<el-button
			class="width-full"
			@click="openDialog"
			:type="form.cascadeOptions.length ? 'primary': ''"
			:plain="form.cascadeOptions.length ? true : false">
			{{form.cascadeOptions.length ? `已设置${form.configLevel}级级联选择` : '添加设置' }}
		</el-button>
		<el-drawer
			class="cascade-drawer el-drawer--old el-drawer--scroll"
			:visible.sync="dialogVisible"
			:append-to-body="true"
			size="800px">
			<template #title>
				<span>多级下拉选择数据设置</span>
			</template>
			<el-form
				ref="form"
				class="form"
				:model="cascade"
				size="small"
				@submit.native.prevent
			>
				<el-form-item label="级联关系" prop="cascade">
					<el-radio-group v-model="cascade.configLevel" class="width-full">
						<el-radio-button :label="1">1级</el-radio-button>
						<el-radio-button :label="2">2级</el-radio-button>
						<el-radio-button :label="3">3级</el-radio-button>
						<el-radio-button :label="4">4级</el-radio-button>
						<el-radio-button :label="5">5级</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="级联项配置" class="config" prop="cascade">
					<div class="cascade">
						<itemList :cascade="cascade" :configLevel="cascade.configLevel"></itemList>
					</div>
					<template v-for="num in cascade.configLevel">
					<portal-target
					  :key="num"
						v-if="num > 1"
						class="cascade"
						:name="'cascade' + (num - 1)">
						<span class="prompt">请选择上一级</span>
					</portal-target>
					</template>
				</el-form-item>
			</el-form>
			<div class="el-drawer__footer">
				<el-button @click="dialogVisible = false" size="small">取 消</el-button>
				<el-button type="primary" @click.stop="submit" size="small">确 定</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash';
import itemList from './itemList.vue';
@Component({
  name: 'cascadeSetting',
  components: {
    itemList
  }
})
export default class extends Vue {
  private currentSelect: any = [];
  @Prop() private form!: any;
  private $message: any;
  private dialogVisible = false;
  private cascade = {
    configLevel: 1,
    children: []
  };

  private num = 0;
  private openDialog () {
    this.dialogVisible = true;
    this.cascade.configLevel = this.form.configLevel;
    this.cascade.children = cloneDeep(this.form.cascadeOptions);
  }

  private requiredValide (children, num = 0) {
    children.forEach((item) => {
      if (!item.value && item.isDelete !== 1) {
        num = num + 1;
      }
      if (item.children && item.children.length) {
        num = this.requiredValide(item.children || [], num);
      }
    });
    return num;
  }

  private filterOptons (cascadeOptions, MaxLevel) {
    return (cascadeOptions || []).filter((option) => {
      if (option.level < MaxLevel) {
        if (option.children) {
          option.children = this.filterOptons(option.children || [], MaxLevel);
        }
        return true;
      } else if (option.level === MaxLevel) {
        if (option.children) {
          option.children = option.children.filter((item) => {
            item.isDelete = 1;
            return !item.isNew;
          });
          return true;
        }
        return true;
      }
    });
  }

  private submit () {
    this.cascade.children = this.filterOptons(this.cascade.children, this.cascade.configLevel);
    const emptyNum = this.requiredValide(this.cascade.children);
    if (emptyNum) {
      this.$message.error(`${emptyNum}项没有填写`);
      return;
    }
    this.form.cascadeOptions = this.cascade.children;
    this.form.configLevel = this.cascade.configLevel;
    this.form.requireLevel = Math.min(this.form.requireLevel, this.cascade.configLevel);
    this.dialogVisible = false;
  }
}
</script>

<style lang="stylus" scoped>
.cascade-drawer {
  /deep/.el-drawer__body {
		overflow-y: auto;
    margin-bottom: 56px;
    padding: 16px 16px 0px 16px;
	}
}
.el-drawer__footer {
	line-height 55px
	min-height 24px
	text-align right
	position absolute
	left 0
	bottom 0
	width 100%
	background rgba(255, 255, 255, 1)
	box-shadow 0px -2px 4px 0px rgba(5, 49, 38, 0.05)
	border-radius 0px 0px 0px 8px
	border-top 1px solid rgba(232, 232, 232, 1)
	padding 0 24px
}
	.config {
		/deep/.el-form-item__content {
			display flex
			width 100%
			border-left 1px solid #E6E6E6
		}
	}
	.cascade {
		border 1px solid #E6E6E6
		min-height 300px
		max-height 400px
		width 150px
		border-left none
		position relative
		color #595959
		.prompt {
			position absolute
			top 50%
			color #8c8c8c
			width 100%
			text-align center
			margin-top -16px
		}
	}
</style>
